<template>
   <div class='publish-container'>
    <el-card>
      <div slot="header">
        <breadcrumb>发布文章</breadcrumb>
      </div>

      <el-form ref="form" :model="article" label-width="80px" :rules="rules">
        <el-form-item label="标题">
          <el-input v-model.trim="article.title" prop="title"></el-input>
        </el-form-item>
        
        <el-form-item label="内容">
          <quillEditor v-model="article.content" :options="editorOption" prop="content"></quillEditor>
        </el-form-item>
        <el-form-item label="封面">
          <el-radio-group v-model="article.form.type" @change="article.form.images=[]">
            <el-radio :label="1">单图</el-radio>
            <el-radio :label="3">三图</el-radio>
            <el-radio :label="0">无图</el-radio>
            <el-radio :label="-1">自动</el-radio>
          </el-radio-group>
        <el-form-item v-if="article.form.type > 0">
            <el-row>
                <el-col :span="6" v-for="(index,idx) in article.form.type" :key="idx">
                  <Cover v-model="article.form.images[idx]"> </Cover>
                </el-col>
            </el-row>   
        </el-form-item>
        </el-form-item >      
          <Channel v-model="article.channel_id"></Channel>
        <el-form-item>
          <el-button type="primary"  @click="doSave">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css' 
import { quillEditor } from 'vue-quill-editor'
import breadcrumb from '@/components/breadCrumb'
import Channel from '@/components/Channel.vue'
import Cover from '@/components/cover.vue'
import axios from 'axios'
export default {
   name:'addAr',
   props: { },
   components: {
      breadcrumb,
      quillEditor,
      Channel,
      Cover
   },
   data () {
    return {
       rules:{
 // 属性名，就是一类验证规则，可以自己起名字
        // 属性值：是一个数组，其每个对象表示一种规则。
        title: [
          // required 是否必须， message:错误提示, triggr: 验证时机
          { required: true, message: '请输入内容', trigger: 'change' },
          
        ],
        content:[
            { required: true, message: '请输入内容', trigger: 'blur' },
            { min: 20, max: 30000, message: '最少20个字', trigger: 'blur' }
        ],
        channel_id:[
            { required: true, message: '请输入内容', trigger: 'blur' },
        ],

       },
      article: {
         title: '这里有一篇好文章',
         content: '这里有一篇好文章',
         form: { // 封面
            type: 0, // 封面图片的类型
            images: [] // 封面的地址
         },
         channel_id: ''
      },
      editorOption: {
          placeholder: '',
          modules: {
            // 配置工具栏
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ header: 1 }, { header: 2 }],
                [{ list: 'ordered' }, { list: 'bullet' }],
                [{ indent: '-1' }, { indent: '+1' }],
                ['image']
            ]
   }
      },
    }
   },
  computed: { },
  created () {
    this.loadDetail ()
   },
  methods: {

    async loadDetail () {
        const token = localStorage.getItem('tokenInfo')
        const result = await axios({
          method:'get',
          url:'http://ttapi.research.itcast.cn/mp/v1_0/articles/'+this.$route.params.id,
          headers:{
                     Authorization:`Bearer ${token}`
                  },
        })
        console.log(result);
        this.article.title = result.data.data.title
        this.article.content = result.data.data.content
        this.article.form.type = result.data.data.cover.type
        this.article.form.images = result.data.data.cover.images
        this.article.channel_id= result.data.data.channel_id
        this.article.id = result.data.data.id
    },
     doSave () {
       try{
         this.$refs.form.validate(async result=>{
            console.log(result);
            if(result){
               const token = localStorage.getItem('tokenInfo')
               const result = await axios({
               method:'put',
               url:'http://ttapi.research.itcast.cn/mp/v1_0/articles/'+this.$route.params.id,
               headers:{
                     Authorization:`Bearer ${token}`
                  },
               data:{  
                     title:this.article.title,
                     content:this.article.content,
                     cover:{
                        type:this.article.form.type,
                        images:this.article.form.images,
                     },
                     channel_id:this.article.channel_id,
                  
                  
               }
          
       })
       console.log(result);
       this.$message.success('你做的很好') 
             }
          })
         
       } catch(err){
          console.log(err);
          this.$message.error('操作失败')
       }
       
    }
  }

}
</script>

<style>

</style>